<template>
  <div class="common-container">
    <div class="statistics">
      <div class="statistics_div" style="border-left: 8px solid #ff986b">
        <div>
          <span style="color: #ff986b">{{ today }}</span>
          <span>今日告警</span>
        </div>
        <div>
          <el-image :src="src"></el-image>
        </div>
      </div>
      <div class="statistics_div" style="border-left: 8px solid #f4636c">
        <div>
          <span style="color: #f4636c">{{ untreated }}</span>
          <span>未处理告警</span>
        </div>
        <div>
          <el-image :src="src2"></el-image>
        </div>
      </div>
      <div class="statistics_div" style="border-left: 8px solid #4a77ff">
        <div>
          <span style="color: #4a77ff">{{ beingProcessed }}</span>
          <span>处理中告警</span>
        </div>
        <div>
          <el-image :src="src4"></el-image>
        </div>
      </div>
      <div class="statistics_div" style="border-left: 8px solid #16dbcc">
        <div>
          <span style="color: #16dbcc">{{ processed }}</span>
          <span>已处理告警</span>
        </div>
        <div>
          <el-image :src="src3"></el-image>
        </div>
      </div>
    </div>

    <div class="div_box_content">
      <div class="header">
        <div class="header_left">
          <el-input v-model.trim="search_val.imei" oninput="this.value=this.value.replace(/\D/g,'')" placeholder="设备编码"
            size="small" clearable @clear="clearNickname" style="width: 220px;margin-right: 15px;" maxlength="50">
            <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
            </el-button>
          </el-input>

          <el-popover placement="bottom" width="460" trigger="click" popper-class="popover" size="small"
            v-model="showPopover">
            <div>
              <el-form label-width="70px" style="margin: 20px 0" class="popover_from">

                <el-form-item size="small" label="组织机构"
                  v-if="user.roleName === 'TENANT_ADMIN' || user.roleName === 'ORG_ADMIN'">
                  <TreeSearch style="width: 360px;margin-left: 15px;" @changeOrgId="changeOrgId" ref="refTreeSearch">
                  </TreeSearch>
                </el-form-item>

                <el-form-item size="small" label="联网单位">
                  <el-select size="small" style="width: 360px;margin-left: 15px;" clearable v-loadMore="loadMore"
                    v-model='search_val.selectedValue' placeholder='请选择联网单位' filterable remote
                    :remote-method="remoteMethod" @clear="handleClear">
                    <el-option v-for='item in orgList' :label='item.orgName' :value='item.id' :key='item.id'>
                    </el-option>
                    <div class="div_box" v-loading="loading" :style="loading ? '' : 'display: none;'"> </div>
                  </el-select>
                </el-form-item>

                <el-row>
                  <el-col :span="24">
                    <el-form-item size="small" label="安装点">
                      <el-input v-model.trim="search_val.name" placeholder="请输入安装点" size="small" clearable
                        style="width: 360px; margin-left: 15px" maxlength="15">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item size="small" label="处理状态">
                      <el-select v-model="search_val.status" placeholder="处理状态" size="small" clearable
                        style="width: 130px; margin-left: 15px">
                        <el-option v-for="(item, i) in statusList" :key="i" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item size="small" label="告警类型">
                      <el-select v-model="search_val.alarmType" placeholder="告警类型" size="small" clearable
                        style="width: 130px; margin-left: 15px">
                        <el-option v-for="dict in dict.type.device_alarm_type" :key="dict.id"
                          :label="dict.raw.dickLabel" :value="dict.raw.dickValue" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item size="small" label="产品类型">
                      <el-select v-model="search_val.deviceType" placeholder="产品类型" size="small" clearable
                        style="width: 130px; margin-left: 15px" @visible-change="enterpriseChange2"
                        @change="deviceTypeChange">
                        <el-option v-for="item in productList" :key="item.id" :label="item.name"
                          :value="item.deviceType">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <!-- v-if="classMarkFlag" -->
                    <el-form-item size="small" label="产品型号">
                      <el-select size="small" style="width: 130px; margin-left: 15px" v-loadMore="loadMore2" clearable
                        v-model="search_val.classMark" placeholder="产品型号">
                        <el-option v-for="item in classMarkList" :label="item.model" :value="item.model" :key="item.id">
                        </el-option>
                        <div class="div_box" v-loading="loading2" :style="loading2 ? '' : 'display: none;'"></div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item size="small" label="日期">
                  <el-date-picker v-model.trim="timeArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions" style="width: 360px" clearable>
                  </el-date-picker>
                </el-form-item>
              </el-form>
              <div class="footer" style="text-align: right">
                <el-button size="small" @click="resetClick1" class="cancel-button">重 置</el-button>
                <el-button size="small" class="confirm-button" @click="searchClick1">确 定</el-button>
              </div>
            </div>
            <el-button size="small" slot="reference" :class="hasSearch ? 'elhasSearch elhasSearch2' : 'elhasSearch2'">
              高级搜索<i class="el-icon-search" style="margin-left: 5px; font-size: 12px"></i></el-button>
          </el-popover>
        </div>

        <div class="header_right">
          <el-button class="dropdown" size="small" icon="el-icon-upload2" style="margin-left: 15px" @click="addClick"
            v-permission="{ action: 'alarm:export' }">
            导出
          </el-button>

          <el-dropdown @command="onDropdown">
            <el-button size="small" style="margin-left: 15px" class="dropdown">
              批量操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item command="export">批量导出</el-dropdown-item> -->
              <el-dropdown-item command="dispose">批量处理</el-dropdown-item>
              <!-- <el-dropdown-item command="beover">批量完结</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>

          <!-- <el-button size="small" type="primary" @click="downloadClick">导出</el-button> -->
        </div>
      </div>
      <div class="content">
        <el-table :data="tableData" height="calc(100% - 65px)" class="table" :header-cell-style="headerStyle"
          ref="reftable" row-key="id" @selection-change="batchSelect" @select="tabselect" v-loading="loadingTable"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(47, 51, 73, 0.3)">
          <el-table-column align="center" type="selection" :reserve-selection="true" min-width="40">
          </el-table-column>
          <el-table-column align="center" label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column align="center" prop="orgName" label="联网单位" min-width="80" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="name" label="安装点" min-width="80" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="productName" label="产品类型" min-width="80" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="classMark" label="产品型号" min-width="80" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="imei" label="设备编码" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="subDeviceCode" label="子设备编码" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="alarmType" label="告警类型" min-width="120" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <dict-tag :options="dict.type.device_alarm_type" :value="row.alarmType" />
            </template>
          </el-table-column>

          <el-table-column align="center" prop="status" label="处理状态" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1" type="danger">未处理</el-tag>
              <el-tag v-if="scope.row.status == 2" type="warning">处理中</el-tag>
              <el-tag v-else-if="scope.row.status == 3" type="success">已处理</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="告警时间" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="handlingTime" label="处理时间" min-width="120" show-overflow-tooltip>
          </el-table-column>

          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="{ row }">
              <el-tooltip class="item" effect="dark" content="处理" placement="bottom" v-if="row.status == 1"
                v-permission="{ action: 'alarm:handle' }">
                <i @click="onHandle(row)" class="iconfont tixianchuli tableBtnIcon"></i>
              </el-tooltip>

              <el-tooltip class="item" effect="dark" content="详情" placement="bottom" v-else
                v-permission="{ action: 'alarm:details' }">
                <i @click="onHandle(row)" class="iconfont xiangqing tableBtnIcon"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="AlarmList" class="pagination" />
      </div>
    </div>
    <warnHandle ref="refWarnList" :alarmHandleInfo="alarmHandleInfo" :batchList="batchList"></warnHandle>
    <exports ref="refexports" :targetId="targetId"></exports>
  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import WarnHandle from "./components/warnHandle.vue";
import {
  reqAlarmList,
  reqTodayAlarm,
  reqAlarmCount,
  reqProductList,
  reqDetectorProductList,
} from "@/api/api";
import { mapState } from "vuex";
import SpacesManage from "../spacesManage/spacesManage.vue";
import TreeSelSearch from "@components/TreeSelSearch.vue";
import loadMore from "@mixin/loadMore";
import advanceSearchMixin from "./mixins/advanceSearch.js"; //高级搜索
import exports from "./components/exports.vue";
import TreeSearch from "@components/TreeSearch.vue";

export default {
  dicts: ['device_alarm_type'],
  name: "alarm",
  components: {
    Pagination,
    WarnHandle,
    SpacesManage,
    TreeSelSearch,
    exports,
    TreeSearch
  },
  mixins: [tableStyleMixin, loadMore, advanceSearchMixin],
  data() {
    return {
      //实现时间限制选择在一个月内而且不能超过当前时间
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.cuttentTime = minDate.getTime();
          if (maxDate) {
            this.cuttentTime = "";
          }
        },
        disabledDate: (time) => {
          //获取当前时间戳
          let myDate = new Date();
          let newY = myDate.getFullYear();
          let newM = myDate.getMonth() + 1;
          let newD = myDate.getDate();
          let oldTime =
            newY +
            "-" +
            (newM < 10 ? "0" + newM : newM) +
            "-" +
            (newD < 10 ? "0" + newD : newD) +
            " " +
            "23:59:59";
          // let oldTime="2022-7-5 23:59:59"
          oldTime = new Date(oldTime).getTime(); // 将中国时间转换成毫秒
          // 今天之后的时间不可选
          if (time.getTime() > oldTime) {
            //time.getTime() > Date.now()
            return true;
          }
          //选择日期范围为一个月
          if (this.cuttentTime != "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.cuttentTime - one;
            const maxTime = this.cuttentTime + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      src: require("@assets/images/gaojing2.png"),
      src2: require("@assets/images/gaojing3.png"),
      src3: require("@assets/images/gaojing1.png"),
      src4: require("@assets/images/gaojing4.png"),
      timeArr: [],
      projectList: [], //单位数据
      statusList: [
        {
          id: "1",
          name: "未处理",
        },
        {
          id: "2",
          name: "处理中",
        },
        {
          id: "3",
          name: "已处理",
        },
      ],
      deviceTypeList: [
        {
          id: "DoorMagnetism",
          name: "门磁",
        },
        {
          id: "Camera",
          name: "摄像机",
        },
        {
          id: "GasSensor",
          name: "燃气",
        },
        {
          id: "Infrared",
          name: "红外",
        },
        {
          id: "SmokeAlarm",
          name: "烟感",
        },
      ],
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
      alarmHandleInfo: {},
      search_val: {
        name: "",
        imei: "",
        orgId: "",
        status: "",
        alarmType: "",
        deviceType: "",
        classMark: "",
        selectedValue: "",
      },
      showPopover: false, //v-model默认值是false, click激活变成true
      loadingSearch: false,
      today: "",
      processed: "",
      beingProcessed: "",
      untreated: "",
      productList: [],
      batchDate: [],
      ProductList: [],
      targetId: "",
      parentId: "",
      loadingTable: false,
    };
  },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  watch: {
    // 时间控件清空
    // 'timeArr'(e){
    //   // console.log(e);
    //   if(e==null){
    //       this.clearNickname()
    //   }
    // }
  },
  mounted() {
    console.log(this.dict.type.device_alarm_type);

    // if (this.user.roleName == 'ORG_ADMIN' || this.user.roleName == 'INSTERALL_USER') {
    //   this.AlarmList();
    // } else {
    //   this.AlarmList();
    // }
    this.AlarmList();
    this.TodayAlarm();
    if (this.user.roleName == 'INSTERALL_USER' || this.user.roleName == 'UNIT_ADMIN') {
      this.getOrgList()
    }
  },
  methods: {
    changeOrgId(instanceId) {
      this.parentId = instanceId.id
      this.handleClear();
      // this.clearNickname();
      // this.TodayAlarm();
    },
    // 单选
    tabselect(e) {
      // console.log(e);
      if (e.length > 100) {
        let del_row = e.pop(); //删除数组最后一个元素
        this.$refs.reftable.toggleRowSelection(del_row, false);
        this.$modal.notifyWarning("最多只能勾选100条");
      }
    },
    // 选择复选框批量添加联系人
    batchSelect(arr) {
      // console.log(arr);
      if (arr.length > 100) {
        let del_row = arr.pop(); //删除数组最后一个元素
        this.$refs.reftable.toggleRowSelection(del_row, false);
        return;
      }
      this.disposeFlag = false;
      this.beoverFlag = false;
      this.batchList = [];
      this.batchDate = arr;
      let type = "";
      let classMark;
      arr.forEach((item, index) => {
        if (index == 0) {
          type = item.deviceType; //判断是不是同一种产品类型
          classMark = item.classMark; //产品型号
        }
        if (
          type != item.deviceType ||
          classMark != item.classMark ||
          item.status != 1
        ) {
          this.disposeFlag = true; //批量处理
        }
        if (item.status != 2) {
          this.beoverFlag = true; //批量完结
        }
        this.batchList.push(item.id);
      });
    },
    // 导出
    // downloadClick() {
    //   if (this.batchDate.length <= 0)
    //     return this.$modal.notifyWarning('请先勾选要导出的告警');
    //   import("@/vendor/Export2Excel").then((excel) => {
    //     // 设置Excel的表格第一行的标题
    //     const tHeader = ['单位', '安装点', '产品类型', '设备编码', '告警类型', '告警发生时间', '最后处理时间', '处理状态'];
    //     //  'date', 'struct1', 'struct2'对象的属性
    //     const filterVal = ['orgName', 'name', 'deviceType', 'imei', 'alarmType', 'createTime', 'handlingTime', 'status'];

    //     const list = this.batchDate;// 数据集
    //     const data = this.formatJson(filterVal, list);

    //     excel.export_json_to_excel({
    //       header: tHeader, //表头
    //       data, //json数据
    //       filename: "告警列表", //导出文件名
    //       autoWidth: true, //宽度是否自适应
    //       bookType: "xlsx", //导出文件后缀名
    //     });
    //     this.$modal.notifySuccess("导出成功，请在任务管理中查看");
    //     this.$refs.reftable.clearSelection()
    //   });
    // },
    //格式化json
    // formatJson(filterVal, jsonData) {
    //   return jsonData.map(v => filterVal.map(j => v[j]))
    // },

    // 下拉请求列表
    enterpriseChange2(val) {
      if (val) {
        this.getProductList();
      }
    },
    //   获取产品列表
    async getProductList() {
      const res = await reqProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.productList = res.data.rows;
    },
    // 告警详情
    onHandle(e) {
      // console.log(e);
      this.$store.commit("saveWarn", e);
      this.$router.push({ name: "alarmDetails", params: { id: "111" } });
      // this.$refs.refWarnList.dialogVisible = true;
    },
    // async onHandle(e) {
    //   this.alarmHandleInfo = JSON.parse(JSON.stringify(e));
    //   // 查看告警处理结果
    //   let res = await reqAlarmHandleResult(this.alarmHandleInfo.id);
    //   if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //   if (res.data.row.remarks) {
    //     this.alarmHandleInfo.remarks = res.data.row.remarks;
    //     this.alarmHandleInfo.alarmFactor = res.data.row.alarmFactor;
    //     this.alarmHandleInfo.status = 1;
    //   } else {
    //     this.alarmHandleInfo.status = 0;
    //   }
    //   this.$refs.refWarnList.dialogVisible = true;
    // },
    // 清空
    clearNickname() {
      this.page = 1;
      this.limit = 10;
      this.AlarmList();
    },
    // 重置
    async resetClick() {
      this.timeArr = [];
      this.search_val = {
        name: "",
        imei: "",
        orgId: "",
        status: "",
        alarmType: "",
        deviceType: "",
        classMark: "",
        selectedValue: "",
      };
      this.page = 1;
      this.limit = 10;
      await this.AlarmList();
    },
    //查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.AlarmList();
      this.loadingSearch = false;
    },
    // 获取告警列表
    async AlarmList() {
      if (this.timeArr == null) {
        this.timeArr = "";
      }
      this.loadingTable = true;
      let res = await reqAlarmList(this.page, this.limit, {
        userId: this.user.userId,
        tenantId: this.user.tenantId,
        orgId: this.search_val.selectedValue == '' ? this.parentId : this.search_val.selectedValue,//机构||单位
        roleName: this.user.roleName,
        status: this.search_val.status,
        imei: this.search_val.imei,
        name: this.search_val.name,
        alarmType: this.search_val.alarmType,
        deviceType: this.search_val.deviceType,
        classMark: this.search_val.classMark,
        startTime: this.timeArr[0],
        endTime: this.timeArr[1],
      });
      this.loadingTable = false;
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.hasSearch = (this.parentId || this.search_val.selectedValue || this.search_val.status || this.search_val.name || this.search_val.deviceType || this.search_val.classMark || this.search_val.alarmType || this.timeArr[0] || this.timeArr[1]) ? true : false
      this.targetId = this.search_val.selectedValue == '' ? this.parentId : this.search_val.selectedValue,//机构||单位
        this.tableData = res.data.rows;
      this.tableData.forEach((item) => {
        this.ProductList.forEach((item2) => {
          if (item.deviceType == item2.deviceType) {
            item.productName = item2.name; //产品名称
          }
        });
        this.detectorProductList.forEach((item2) => {
          if (item.deviceType == item2.detectorType) {
            item.productName = item2.name; //产品名称
          }
        });
      });
      this.total = res.data.total || 0;
    },
    // 探测器列表
    async getDetectorProductList() {
      let res = await reqDetectorProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.detectorProductList = res.data.list;
      // console.log(this.detectorProductList,'detectorProductList');
    },
    // 产品列表
    async Product() {
      let res = await reqProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.ProductList = res.data.rows;
    },
    // 今日告警数量
    async TodayAlarm() {
      let res = await reqTodayAlarm({
        tenantId: this.user.tenantId,
        orgId: this.search_val.selectedValue == '' ? this.parentId : this.search_val.selectedValue,//机构||单位
        type: 2,
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.today = res.data.row.todayCount || 0;
    },
    // 告警数量
    async AlarmCount() {
      let res = await reqAlarmCount({
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        status: "1",
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.untreated = res.data.total;
      let res2 = await reqAlarmCount({
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        status: "2",
      });
      if (res2.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.beingProcessed = res2.data.total;
      let res3 = await reqAlarmCount({
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        status: "3",
      });
      if (res3.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.processed = res3.data.total;
    },
  },
  async created() {
    // console.log(this.$route.params);
    if (this.$route.params.orgId) {
      if (this.$route.params.orgId != "1") {
        this.search_val.selectedValue = this.$route.params.orgName;
        this.projectList.push({
          id: this.$route.params.orgId,
          orgName: this.$route.params.orgName,
        });
      }
      this.search_val.orgId =
        this.$route.params.orgId == 1 ? "" : this.$route.params.orgId;
    }
    await this.Product(); //产品列表
    this.getDetectorProductList()
    this.AlarmCount();
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
@import url("~@views/style/tree.less"); //左侧组织机构样式

.header_left {
  display: flex;
}

// 日期控件
.el-range-editor.el-input__inner {
  margin-left: 15px;
  height: 32px;
  // padding: 0px 10px;
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  background: @primaryHeaderBgcolor !important;
  color: @primaryContentTxt;
}

// 今日告警
.common-container {
  box-shadow: none !important;

  // background-color: transparent;
  // height: 65vh;
  .header {
    background-color: @primaryHeaderBgcolor;
    border-radius: 6px 6px 0 0;
    position: relative;
    top: -5px;
  }
}

// 今日告警
.statistics {
  position: relative;
  // border-radius: 6px;
  // height: 20%;
  min-height: 150px;
  width: 100%;
  // margin-bottom: 18px;
  color: @primaryThemeTxtColor;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  // padding: 20px 28px 28px 28px;
  padding: 1.5% 2% 1.5% 2%;
  box-sizing: border-box;
  border-bottom: 1px solid @primaryBorderColor;
  background: @primaryBgcolor;
  z-index: 9;

  .statistics_div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: @primarywarn;
    width: 21%;
    box-sizing: border-box;

    >div:first-of-type {
      display: flex;
      flex-direction: column;
      align-items: center;

      >span:first-of-type {
        margin-bottom: 3px;
        font-size: 30px;
      }

      >span:last-of-type {
        font-size: 12px;
      }
    }

    >div:last-of-type {
      width: 16%;
    }
  }

  .item {
    box-sizing: border-box;
    border-radius: 6px;
    width: 49.4%;
    background: @primaryHeaderBgcolor;
    box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
    display: flex;
    align-items: center;
    justify-content: space-around;

    .citem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .number {
        font-size: 46px;
        margin-bottom: 4px;
      }

      .first {
        color: rgb(53, 163, 241);
      }

      .second {
        color: rgb(250, 156, 149);
      }

      .third {
        color: rgb(140, 219, 124);
      }

      .title {
        font-size: 13px;
        color: @primaryThemeTxtColor;
      }
    }
  }
}

.content {
  height: calc(100% - 61px) !important;
}

::v-deep .el-button--small {
  // background: #7367f0;
  // color: #fff;
  // border: none;
  //  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, background 0s, border 0s, -webkit-box-shadow .15s ease-in-out;

  &:hover {
    // box-shadow: 0px 0px 16px 0px ~"rgb(115 103 240 / 50%)";
    // transition: box-shadow .3s;
  }
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 下拉框加载结束

.div_box_content {
  height: calc(100% - 155px) !important;
  // box-shadow: @boxShadow;
}

// 高级搜索
::v-deep .el-button--primary {
  background-color: #7367f0;
  border: 1px solid #7367f0;
  color: #fff;
}

::v-deep .el-form-item__label {
  color: @primaryThemeTxtColor2;
  padding: 0px;
}

::v-deep .el-input__inner {
  color: var(--primaryContentTxt, #f1f1f1) !important;
}

.dropdown {
  background: #7367f0;
  color: #fff;
  border: none;
}

::v-deep .el-button--small {
  border: none;
}
</style>
